<!--
//
// Index.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/14.
//
-->
<template>
    <div class="Index">
        <!-- 筛选区 -->
        <table-search-bar :config="requestBodyConfig" :model="requestBody" title="操作日志" @search="searchClicked" />
        <!-- 内容 -->
        <div class="container">
            <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="state.list" :height="tableHeight" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}"  :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}" >

                <template #empty>
                    <el-empty :image-size="100" />
                </template>
                <vxe-column title="#" type="seq" width="50" />
                <vxe-column field="opTime" title="操作时间" type="expand" width="180">
                    <template #default="{ row }">
                        <span>{{ filters.dateFilter(row.opTime) }}</span>
                    </template>
                    <template #content="{row}">
                        <div class="log-info">
                            <div class="row">
                                <div class="label">操作名称</div>
                                <div class="value">{{ row.name }}</div>
                            </div>
                            <div class="row">
                                <div class="label">操作方式</div>
                                <div class="value">
                                    <el-tag v-if="row.opType === 1">新增</el-tag>
                                    <el-tag v-if="row.opType === 2" type="danger">删除</el-tag>
                                    <el-tag v-if="row.opType === 3" type="warning">编辑</el-tag>
                                    <el-tag v-if="row.opType === 4" type="success">查询</el-tag> 
                                    <el-tag v-if="row.opType === 0" type="info">其他</el-tag>
                                </div>
                            </div>
                            <div class="row">
                                <div class="label">是否成功</div>
                                <div class="value">
                                    <el-tag v-if="row.success === 'Y'" type="success">成功</el-tag>
                                    <el-tag v-if="row.success === 'N'" type="danger">失败</el-tag>
                                </div>
                            </div>
                            <div class="row">
                                <div class="label">请求方式</div>
                                <div class="value"><code>{{ row.reqMethod }}</code></div>
                            </div>
                            <div class="row" style="width: 100%">
                                <div class="label">请求地址</div>
                                <div class="value">
                                    <b-icon name="bi-clipboard-check" size="14" style="margin-right: 4px;color: #409EFF;cursor: pointer;" @click.stop="setCopy(row.url)" />
                                    <code>{{ row.url }}</code>
                                </div>
                            </div>
                            <div class="row" style="width: 100%">
                                <div class="label">请求方法名</div>
                                <div class="value">
                                    <b-icon name="bi-clipboard-check" size="14" style="margin-right: 4px;color: #409EFF;cursor: pointer;" @click.stop="setCopy(row.methodName)" />
                                    <code>{{ row.methodName }}</code>
                                </div>
                            </div>

                            <div class="row" style="width: 100%">
                                <div class="label">请求参数</div>
                                <div class="value">
                                    <b-icon name="bi-clipboard-check" size="14" style="margin-right: 4px;color: #409EFF;cursor: pointer;" @click.stop="setCopy(row.param)" />
                                    <code>{{ row.param }}</code>
                                </div>
                            </div>
                            <div class="row" style="width: 100%">
                                <div class="label">返回信息</div>
                                <div class="value">{{ row.message }}</div>
                            </div>
                            <div class="row" style="width: 100%">
                                <div class="label">返回结果</div>
                                <div class="value">{{ row.result }}</div>
                            </div>
                            <div class="row">
                                <div class="label">耗时(毫秒)</div>
                                <div class="value">{{ row.elapsedTime }}</div>
                            </div>
                            <div class="row">
                                <div class="label">操作人</div>
                                <div class="value">{{ row.account }}</div>
                            </div>
                            <div class="row">
                                <div class="label">操作系统</div>
                                <div class="value">{{ row.os }}</div>
                            </div>
                            <div class="row">
                                <div class="label">浏览器</div>
                                <div class="value">{{ row.browser }}</div>
                            </div>
                            <div class="row">
                                <div class="label">IP地址</div>
                                <div class="value">{{ row.ip }}</div>
                            </div>
                        </div>
                    </template>
                </vxe-column>
                <vxe-column align="left" field="name" min-width="120" title="名称"></vxe-column>
                <vxe-column field="opType" title="操作方式" width="120">
                    <template #default="{ row }">
                        <el-tag v-if="row.opType === 1">新增</el-tag>
                        <el-tag v-if="row.opType === 2" type="danger">删除</el-tag>
                        <el-tag v-if="row.opType === 3" type="warning">编辑</el-tag>
                        <el-tag v-if="row.opType === 0" type="info">其他</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="success" title="是否成功" width="100">
                    <template #default="{ row }">
                        <el-tag v-if="row.success === 'Y'" type="success">成功</el-tag>
                        <el-tag v-if="row.success === 'N'" type="danger">失败</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="url" min-width="220" title="请求地址"></vxe-column>
                <vxe-column field="reqMethod" min-width="120" title="请求方式"></vxe-column>
                <vxe-column field="account" min-width="180" title="操作人"></vxe-column>
            </vxe-table>
            <div class="page-config">
                <vxe-pager v-model:current-page="requestParams.pageIndex" v-model:page-size="requestParams.pageSize" :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" :page-sizes="pageConfig.sizes" :total="pageConfig.total" background size="mini" @page-change="onPageChange" />
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
const tableHeight = computed(() => store.getters.layoutType === "mobile" ? "" : store.getters.containerHeight - 194)

const {$message, $dayjs} = window;
// 当前页面权限
const permission = {
    add: "",
    edit: "",
    delete: "SysOperateLog/ClearOperateLog"
};

// 表单
const editForm = ref();

// 响应式数据
const state = reactive({
    list: [],
    isLoading: false
});
// 过滤器
const filters = computed(() => {
    return {
        dateFilter(val) {
            return $dayjs(val).format("YYYY-MM-DD HH:mm:ss")
        }
    }
})

// 请求query参数
const requestParams = reactive({
    orderCol: "id",
    isDesc: true,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({
    name: null,
    opType: null,
    success: null,
    methodName: null,
    reqMethod: null,
})
// 筛选区域配置
const requestBodyConfig = reactive({
    name: {label: "名称", component: "el-input"},
    opType: {label: "操作方式", component: "el-select", data: [{name: "新增", value: 1}, {name: "删除", value: 2}, {name: "编辑", value: 3}, {name: "其他", value: 0}], inMore: true},
    // methodName: {label: "方法名", component: "el-input"},
    reqMethod: {label: "请求方式", component: "el-select", data: [{name: "get", value: 'GET'}, {name: "post", value: 'POST'}, {name: "put", value: "PUT"}, {name: "delete", value: "DELETE"}], inMore: true},
    success: {label: "是否成功", component: "el-select", data: [{name: "成功", value: 'Y'}, {name: "失败", value: 'N'}], inMore: true},
})
// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})

// 点击搜索
function searchClicked() {
    console.log("搜索条件: ", requestBody)
    reload(true);
}

// 查询列表
async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody
    };
    state.isLoading = true;
    const {success, data} = await api.GetOperateLogPageList(params, body);
    state.isLoading = false;
    if (!success) return 0;
    const {items, totalCount} = data;
    state.list = items;
    pageConfig.total = totalCount;
}

// 添加
function addData() {
    // console.log(editForm)
    editForm.value.show({
        title: "添加",
        ok: () => {
            reload();
        }
    })
}

// 修改
function editData(row) {
    editForm.value.show({
        title: "修改",
        options: {...row},
        ok: () => {
            reload();
        }
    })
}

// 删除
async function deleteData({id}) {
    console.log("删除: ", id)
    const {success, data} = await api.ClearOperateLog({id});
    if (!success) return 0;
    reload();
    $message.success("删除成功")
}

// 分页事件
function onPageChange({type}) {
    if (type === "current") {
        loadList()
    }
    if (type === "size") {
        reload(true)
    }
}

// 刷新
function reload(re) {
    if (re) requestParams.pageIndex = 1;
    loadList()
}

// 复制
function setCopy(text) {
    window.$copyText(text)
}

onMounted(() => {
    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}

.log-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px 40px;

    .row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        width: 300px;
        padding: 4px 0;

        .label {
            padding: 4px 10px;
            font-size: 14px;
            color: #666666;
            width: 100px;
            box-sizing: border-box;
        }

        .value {
            width: calc(100% - 100px);
            box-sizing: border-box;
            padding: 4px 10px;
            font-size: 14px;
            font-weight: bold;
            white-space: pre-wrap;
            word-break: break-all;
        }
    }
}

</style>
